<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue2.js"></script>
</head>

<body>
    <div id="box">

        <div>
            money = {{ money  | currencyFormat(currency, arrs.find(item=>item.unit==currency).icon ,5,2 ) }}
        </div>
        <select name="" id="" v-model="currency">
            <option  v-for="(item,index) in arrs" :key="index" :value="item.unit" >{{item.label}}</option>
        </select>
        <div>{{currency}}</div>
    </div>
</body>
<script>
    Vue.filter('currencyFormat',(value,unit='1',icon='¥',max=6,min=2)=>{
        if(!value) return '';
        value= value * unit;
        return icon +value.toLocaleString('zh',{
            maximumFractionDigits:max,  // 最多几位小数
            minimumFractionDigits:min,  // 最少几位小数
        })
    })
    const vm = new Vue({
        data() {
            return {
                money: 3701378216321.123214,
                arrs: [
                    { label: "人民币", unit: '1', icon: '¥' },
                    { label: "美元", unit: '0.14', icon: '$' },
                    { label: "日元", unit: '20', icon: '￥' },
                    { label: "韩元", unit: '185', icon: 'KRW' },
                    { label: "越南盾", unit: '3340', icon: 'VND' },
                ],
                currency:1,
            }
        },
    }).$mount('#box');
</script>

</html>